<template>
  <div class="appspr">
    <div class="top-content">
      <div class="spr-content top-bg">
        <div class="top-items ">
          <div class="top-item">
            <h3>原理</h3>
            <div class="border"></div>
            <div class="content">
              SPR在物理上指等离子体或等离激元共振，全称为Surface Plasmon Resonance，表面（一般是固相和液相间的界面）等离子体共振是用于表征光学折射系数改变而导致的<span>信号放大</span>的光学传感技术。
            </div>
          </div>
          <div class="top-item">
            <h3>功能</h3>
            <div class="border"></div>
            <div class="content">
              除了可以进行超高灵敏度终点法分子定量检测，<span>NanoSPR</span>可以实时<span>无标记</span>的观测到生物化学分子<span>动态结合</span>、薄膜形成等表面现象，并能给出高选择性高特异性的亲和力检测信号。
            </div>
          </div>
          <div class="top-item merge">
            <h3>应用</h3>
            <div class="border"></div>
            <div class="content">
              生命科学，食品安全，环境检测，生物医学；毒素和抗生素快速检测；蛋白质组学；药物筛选及相关药物动力学实时检测；生物分子特殊肽段及相关偶合分子的检测；病毒及致病分子蛋白及受体研究；分子识别，免疫调节，免疫测定等，尤其适于在药物开发生产服务企业和科研院所进行分子筛选和检测标定。
            </div>
          </div>
          <div class="top-item merit">
            <h3>优点</h3>
            <div class="border"></div>
            <div class="content">
              大规模晶圆级制造纳米3D结构，结合能力强，低成本
            </div>
          </div>
          <div class="top-item te">
            <h3>特点</h3>
            <div class="border"></div>
            <div class="content">
              高精密纳米结构，三维杯状轮廓，SPR（纳米杯阵列）+ LSPR(纳米颗粒共振)
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="wrap-content">
      <div class="appspr-field">
        <h2 class="h2">Nano SPR 应用领域</h2>
        <div class="content">
          <div class="content-item">
            <div class="content-img">
              <img class="img"
                   src="~@/assets/imgs/spr/spr1@2x.png">
            </div>
            <div class="content-info"
                 style="margin-left:337px;">
              <h3 class="h3">医用及家用体液快检设备及耗材产品</h3>
              <div class="clearfix"
                   style="display:inline-block;">
                <div class="tips">
                  医院快检
                </div>
                <div class="tips">
                  诊所随检
                </div>
                <div class="tips">
                  家庭自检
                </div>
              </div>
              <h3 class="h3 title-top">
                NanoSPR免疫检测卡
              </h3>
              <h3 class="h3 title-top">以胶体金试纸价格达到化学发光定量性能及灵敏度</h3>
              <div class="tips-box title-top">
                <p> · &lt;10 pg/ml高灵敏度</p>
                <p> · &lt;200 元设备成本低</p>
                <p> · &lt;30 元耗材价格低</p>
                <p> · 一步式用户体验好</p>
                <p> · 一设备多应用</p>
                <p> · 用户交互App和云</p>
                <p> · 全面分子级健康管理</p>
              </div>
            </div>
          </div>
          <div class="content-item">
            <div class="content-img"
                 style="float:right;">
              <img class="img"
                   src="~@/assets/imgs/spr/spr2@2x.png">
            </div>
            <div class="content-info"
                 style="margin-right:337px;">
              <h3 class="h3">研发及临床用蛋白分子互作检测及快速定量产品</h3>
              <div class="clearfix"
                   style="display:inline-block;">
                <div class="tips">
                  药物筛选
                </div>
                <div class="tips">
                  蛋白研发
                </div>
                <div class="tips">
                  伴随诊断
                </div>
              </div>

              <h3 class="h3 title-top">
                NanoSPR蛋白互作检测产品,性价比远超传统进口竞品
              </h3>
              <p class="title-top"> · 1/ 10 价格，百倍灵敏度</p>
              <p> · NanoSPR Imaging 显微成像系统达到pg/ml级多重蛋白互作检测</p>
              <h3 class="h3 title-top">NanoSPR一步式蛋白快速定量试剂盒</h3>
              <p class="title-top"> · 1/2 价格，1/3 成本，1/10 耗时,一步操作 · 无需添置新设备
              </p>
            </div>

          </div>
        </div>
      </div>

      <div class="appspr-first">
        <h2 class="h2">
          <p>
            全球第一款蛋白检测NanoSPR试纸条原型
          </p>
        </h2>
        <div class="content">
          <div class="content-item">
            <a href="http://www.liangzhunglobal.com:88/group1/M00/00/0C/rBPDl19OCtSAIVjzAB3mH35VNKQ971.mp4"
               target="_blank">
              <div class="content-img video">
                <img class="img"
                     src="~@/assets/imgs/spr/lm.png">
              </div>
            </a>
            <div class="content-info">
              <h3 class="h3">全球第一款</h3>
              <p>家用级别腺病毒检测机 + 集成生物芯片</p>
              <div class="tips">检测灵敏度,10^4 病毒颗粒度</div>
            </div>
          </div>
          <div class="content-item">
            <div class="content-img"
                 style="float:right;">
              <img class="img"
                   src="~@/assets/imgs/spr/relatvie.png">
            </div>
            <div class="content-info"
                 style="text-align:right;">
              <h3 class="h3">全球第一款</h3>
              <p>家用IgG,IgM抗原抗体测试机 + 集成生物芯片</p>
              <div class="tips">检测灵敏度,10ng/ml (唾液无创）</div>
            </div>

          </div>
        </div>
      </div>

      <div class="appspr-equipment">
        <h2 class="h2">
          <p>一步式快速新冠病毒颗粒检测芯片及便携设备</p>
        </h2>

        <a href="http://www.liangzhunglobal.com:88/group1/M00/00/0C/rBPDl19OCsGAd80lACWvOE5p9E0234.mp4"
           target="_blank">
          <div class="content video">
            <img class="img"
                 src="~@/assets/imgs/spr/qk.png">
          </div>
        </a>
      </div>
      <div class="appspr-close">
        <h2 class="h2-txt">
          服务闭环
          <p>
            大数据/专家医生/APP
          </p>
        </h2>
        <div class="content">
          <img class="img"
               src="~@/assets/imgs/spr/footer-1@2x.png">
          <div class="img-list">
            <img class="img-item"
                 src="~@/assets/imgs/spr/footer-2@2x.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
@import '~@/theme/mixin';

.appspr {
  .spr-content {
    width: 1200px;
    margin: 0 auto;
  }

  .top-content {
    background: #090a20;
  }
  .top-bg {
    position: relative;
    background: url('~@/assets/imgs/spr/kv.jpg') no-repeat 0 0/100%;
    padding: 950px 0 25px 0;
  }
  .top-items {
    position: absolute;
    top: 400px;
    left: 50%;
    translate: rotate(-50%, -50%);
    margin-left: -400px;
    display: grid;
    grid-template-columns: repeat(2, 390px);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
  }
  .top-item {
    padding: 24px;
    background: rgba($color: #062879, $alpha: 0.8);
    color: #99e9ff;
    font-size: 18px;
    h3 {
      color: #fff;
      font-size: 28px;
    }
    .border {
      margin-top: 15px;
      width: 30px;
      border: 2px solid rgba($color: #f5f5f5, $alpha: 0.8);
    }
    .content {
      margin-top: 8px;
    }
  }
  .merit {
    padding: 28px 10px;
  }
  .te {
    padding: 20px 10px;
  }
  .merge {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  .h2 {
    position: relative;
    margin-top: 30px;
    font-size: 36px;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }

  .h2:after {
    width: 35px;
    height: 2px;
    background: rgba($color: #3f4650, $alpha: 0.5);
    content: ' ';
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -9px;
  }

  &-field {
    .content {
      margin: 33px 0;
    }
    .content-item {
      position: relative;
      color: #fff;
      @include clearfix();
      .img {
        width: 337px;
        display: block;
      }
      .h3 {
        font-size: 24px;
      }
      .title-top {
        margin-top: 10px;
      }
      .tips {
        float: left;
        margin-right: 15px;
        margin-top: 20px;
        padding: 8px 18px;
        font-size: 22px;
        color: #4386c3;
        line-height: 17px;
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
      }
      .tips-box {
        display: grid;
        grid-template-columns: repeat(3, 200px);
      }
      p {
        color: rgba($color: #fff, $alpha: 0.8);
        font-size: 18px;
        line-height: 26px;
      }
    }
    .content-img {
      height: 367px;
      float: left;
    }
    .content-info {
      width: 663px;
      background: linear-gradient(58deg, #4378bb, #44bee4);
      padding: 38px 30px;
      height: 367px;
    }
    .content-item:last-child {
      margin-top: 30px;
    }
  }

  &-first {
    .content {
      margin: 30px 15px;
    }
    .content-item {
      @include clearfix();
    }
    .content-img {
      position: relative;
      float: left;
      .img {
        width: 330px;
      }
    }
    .content-info {
      padding: 26px 15px;
      .h3 {
        font-size: 30px;
        color: #4386c3;
        margin-bottom: 10px;
      }
      p {
        color: #4386c3;
        font-size: 24px;
      }
      .tips {
        margin-top: 30px;
        font-size: 20px;
        color: #333333;
      }
    }
  }

  &-equipment {
    .content {
      padding: 30px 15px;
      position: relative;
      .img {
        width: 100%;
      }
    }
  }

  .video:before {
    width: 40px;
    height: 40px;
    content: ' ';
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -20px;
    // background: url('~@/assets/imgs/spr/play.png') no-repeat 0 0 /100%;
    z-index: 99;
  }

  &-close {
    .h2-txt {
      position: relative;
      margin-top: 30px;
      font-size: 36px;
      color: #333333;
      font-weight: bold;
      text-align: center;
      p {
        margin-top: 10px;
        letter-spacing: 2px;
        font-size: 22px;
        color: #333333;
        font-weight: normal;
      }
    }
    .content {
      padding: 0 15px;
      .img {
        margin-top: 100px;
        width: 100%;
        display: block;
      }
      .img-list {
        display: flex;
        justify-content: space-between;
        .img-item {
          width: 100%;
          // box-shadow: 4px 5px 5px 0px rgba(145, 145, 145, 0.19);
          border: solid 1px #ffffff;
        }
      }
    }
  }
}
</style>
